<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <!-- Bootstrap Styles-->
    <link href="assets/css/bootstrap.css" rel="stylesheet"/>
    <!-- FontAwesome Styles-->
    <link href="assets/css/font-awesome.css" rel="stylesheet"/>
    <!-- Morris Chart Styles-->

    <!-- Custom Styles-->
    <link href="assets/css/custom-styles.css" rel="stylesheet"/>
    <!-- Google Fonts-->
    <link href='http://fonts.useso.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
    <!-- TABLE STYLES-->
    <link href="assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet"/>

    <link href="assets/css/base.css" rel="stylesheet"/>

    <!-- jQuery Js -->
    <script src="assets/js/jquery-1.10.2.js"></script>
    <!--又拍云-->
    <script src="assets/js/upyun/spark-md5.js"></script>
    <script src="assets/js/upyun/async.js"></script>
    <script src="assets/js/upyun/upyun-mu.js"></script>

    <!-- Bootstrap Js -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Metis Menu Js -->
    <script src="assets/js/jquery.metisMenu.js"></script>
    <!-- DATA TABLE SCRIPTS -->
    <script src="assets/js/dataTables/jquery.dataTables.js"></script>
    <script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
    <!-- Custom Js -->
    <script src="assets/js/custom-scripts.js"></script>
    <!-- layer Js -->
    <script src="assets/js/layer.js"></script>

    <!-- base Js -->
    <script src="assets/js/base.js"></script>

</head>
<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="user.html"><strong><i class="icon fa fa-motorcycle"></i> 摩托之旅</strong></a>
            <div id="sideNav">
                <i class="fa fa-bars icon"></i>
            </div>
        </div>
        <ul class="nav navbar-top-links navbar-right">
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="change_password.html"><i class="fa fa-user fa-fw"></i> 修改密码</a></li>
                    <li id="log_off"><a href="#"><i class="fa fa-sign-out fa-fw"></i> 退出登录</a></li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>
    </nav>
    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a href="user.html"><i class="fa fa-user"></i>用户信息列表</a>
                </li>

                <li>
                    <a href="#">
                        <i class="fa fa-pie-chart"></i>摩托类型
                        <span class="fa arrow"></span>
                    </a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="motorcycle_list.html">摩托类型</a>
                        </li>
                        <li>
                            <a href="motorcycle_add.html">增加摩托类型</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-book"></i>文章主题
                        <span class="fa arrow"></span>
                    </a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="articles_list.html">文章主题</a>
                        </li>
                        <li>
                            <a href="articles_add.html">增加文章主题 </a>
                        </li>
                        <li>
                            <a href="articles.html">文章列表展示</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="feedbacks.html"><i class="fa fa-file-text"></i>反馈</a>
                </li>

                <li>
                    <a href="gift.html"><i class="fa fa-gift"></i>礼物</a>
                </li>

                <li>
                    <a href="systemMessage.html"><i class="fa fa-comments"></i>群发系统消息</a>
                </li>
                <li>
                    <a class="active-menu" href="#">
                        <i class="fa fa-picture-o"></i>轮播图
                        <span class="fa arrow"></span>
                    </a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="carouselFigure.html">轮播图</a>
                        </li>
                        <li>
                            <a href="carouselFigure_add.html">设置轮播图 </a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="recharge.html"><i class="fa fa-usd"></i>充值</a>
                </li>
            </ul>

        </div>

    </nav>
    <!-- /. NAV SIDE  -->
    <div id="page-wrapper">
        <div class="header">
            <h1 class="page-header">
                轮播图
                <small>摩托之旅后台管理</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="carouselFigure.html">轮播图</a></li>
                <li><a href="carouselFigure_add.html">设置轮播图</a></li>
            </ol>
        </div>

        <div id="page-inner">
            <div class="row">
                <div class="col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="card-title">
                                <div class="title">设置轮播图</div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="form-group">
                                <label for="carousel_id_text">文章ID</label>
                                <input type="text" class="form-control" id="carousel_id_text"
                                       placeholder="请输入想要设为轮播图的文章ID">

                            </div>
                            <div class="form-group">
                                <label>轮播图封面</label>
                                <div id="img_show"><img src="assets/img/add.jpg" style="width: 100%;"></div>
                                <input type="file" name="file" id="file0" class="add_file"
                                       onchange="setImagePreview(this);">
                            </div>
                            <div class="form-group">
                                <button class="save_button" id="submit">保存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <!-- /. PAGE INNER  -->
</div>
<div class="loading">
    <img src="assets/img/loading.gif">
</div>

<script>

    var _input_id = "";

    var _article_id = "";

    window.onload = function () {
        if (storage_admin_id) {
            $('#dataTables-example').dataTable();
            $("#sideNav").click(function () {
                if ($(this).hasClass('closed')) {
                    $('.navbar-side').animate({left: '0px'});
                    $(this).removeClass('closed');
                    $('#page-wrapper').animate({'margin-left': '260px'});

                }
                else {
                    $(this).addClass('closed');
                    $('.navbar-side').animate({left: '-260px'});
                    $('#page-wrapper').animate({'margin-left': '0px'});
                }
            });
            _article_id = location.search; //获取url中"?"符后的字串
            if (_article_id != '') {
                _article_id = _article_id.substring(12, _article_id.length);
                $('#carousel_id_text').val(_article_id);
            }
            $('.loading').hide();
        } else {
            window.location.href = "login.html"
        }
    };

    //上传图片
    function setImagePreview(file) {
        $('.loading').show();
        _input_id = 0;
        if (file.files && file.files[0]) {
            var postfix = file.files[0].name.split('.').pop();
            if (postfix != "jpg" && postfix != "gif" && postfix != "png" && postfix != "jpeg") {
                $('.loading').hide();
                layer.msg("上传仅支持：jpg,gif,png,jpeg格式")
            } else {
                var reader = new FileReader();
                var ratio = "";
                var ext = '.' + file.files[0].name.split('.').pop();
                reader.onload = function (evt) {
                    //加载图片获取图片真实宽度和高度
                    var image = new Image();
                    image.onload = function () {
                        _img_width = image.width;
                        _img_height = image.height;
                        ratio = _img_width / _img_height;
                        //图片上传又拍云
                        var config = {
                            bucket: 'motorcycle',
                            expiration: parseInt((new Date().getTime() + 3600000) / 1000),
                            // 尽量不要使用直接传表单 API 的方式，以防泄露造成安全隐患
                            form_api_secret: '0jWegIsJu9xVxJMrgp4ydONAxok='
                        };
                        var instance = new Sand(config);
                        instance.upload("Image/" + parseInt((new Date().getTime() + 3600000) / 1000) + "Width" + _img_width + "AspectRatioBegin" + ratio + "AspectRatioEnd" + ext);

                    };
                    image.src = evt.target.result;
                };
                reader.readAsDataURL(file.files[0]);
            }
        } else {
            $('.loading').hide();
        }


    }

    document.addEventListener('uploaded', function (e) {
        for (var key in e.detail) {
            if (key === 'path') {
                var img_url = "http://motorcycle.b0.upaiyun.com" + e.detail[key];
                $('#img_show img').attr('src', img_url);
                $('.loading').hide();
            }

        }
    });

    //保存按钮
    $(document).on('click', '#submit', function () {
        var _id = $('#carousel_id_text').val();
        var _img = $('#img_show img').attr('src');
        if (!_id) {
            layer.msg("请输入文章ID!", {time: 3000})
        } else if (!_img || _img == "assets/img/add.jpg") {
            layer.msg("请上传轮播图封面!", {time: 3000})
        } else {
            $.post("http://118.178.59.93:8080/Motocycle/api/v1/carousels", {
                article_id: _id,
                cover: _img
            }, function (data) {
                try {
                    var obj = JSON.parse(data);
                    if (obj.code == 0) {
                        layer.msg("设置成功!");
                        setTimeout(function () {
                            if (_article_id) {
                                window.location.href = "articles.html"
                            } else {
                                location.reload();
                            }

                        }, 3000)
                    }
                } catch (e) {
                    layer.msg(data.msg, {time: 3000});
                }

            })
        }
    })
</script>
</body>
</html>